<%@ Page Title="" Language="C#" MasterPageFile="~/Themes/Default/Popup.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcContrib.UI.Html" %>
<%@ Import Namespace="MvcContrib.UI.Grid" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<%=Html.Resource("User", "TITLE_SELECTUSER")%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%=Html.Resource("User", "TITLE_SELECTUSER")%></h2>
    <form id="popup_query_form" name="popup_query_form" method="post" action="">
    <%=Html.Hidden("request_data")%>
    <div class="tabcontainer">
        <div id="searchTabs">
        <ul>
            <li><a href="#basicSearch"><span><%=Html.Resource("Global","Search") %></span></a></li>
        </ul>
            <div id="basicSearch" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
            </div>
        </div>
    </div>
     </form>
    <div class="tabcontainer">
    <input type="submit" value="<% =Html.Resource("Global","Search") %>" name="btnSubmit" class="button" id="btnSubmit"/>
    <input type="button" value="<% =Html.Resource("Global","CLEAR") %>" name="btnClear" class="button" id="btnClear"/>
    </div>

    <div class="tabcontainer">
    <form id="list_form" name="list_form">
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
    </div>
     <% if ((string)ViewData["mode"] == "multiselect"){ %>
     <div class="tabcontainer">
    <input type="button" value="<% =Html.Resource("Global","SELECT") %>" name="btnSubmit" class="button" id="btnSelect"/>
    <input type="button" value="<% =Html.Resource("Global","CANCEL") %>" name="btnClear" class="button" id="btnCancel"/>
    </div>
    <%} %>
</form>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PostScript" runat="server">
<script type="text/javascript">
/* initialize the popup request from the parent */

if(window.document.forms['popup_query_form'].request_data.value == "")
{
    window.document.forms['popup_query_form'].request_data.value = 
    JSON.stringify(window.opener.get_popup_request_data());
}

    $(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/User/ListData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID', '<% =Html.Resource("User","username") %>', '<% =Html.Resource("User","Email") %>', '<% =Html.Resource("User","CREATIONDATE") %>', '<% =Html.Resource("User","LASTLOGINDATE") %>'],
            colModel: [
          { name: 'id', index: 'id', hidden: true },
          { name: 'username', index: 'username', width: 100, align: 'left' },
          { name: 'email', index: 'email', width: 100, align: 'left' },
          { name: 'createdate', index: 'createdate', width: 100, align: 'left' },
          { name: 'lastlogindate', index: 'lastlogindate', width: 100, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [20, 50],
            sortname: 'username',
            sortorder: "asc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: '',
            hidegrid: false,
            width: 500,
            height: 200,
            <% if((string)ViewData["mode"]=="multiselect"){ %>
            multiselect: true,
            <%}else{ %>
            multiselect: false,
            <%} %>
            editurl: '/User/Edit/'
            <% if((string)ViewData["mode"]!="multiselect"){ %>,
            onSelectRow: function(id) {
                var rowdata = jQuery("#list").getRowData(id);
                //console.log(eval("rowdata.username"));
                sendback(rowdata);
            }
            <%} %>
        }).navGrid('#pager', {
            refresh: true,
            edit: false,
            add: false,
            del: false,
            search: false
        }
        );

        //initialize search buttons
        var sg = jQuery("#basicSearch").filterGrid("list",
        	{
        	    gridModel: false,
        	    enableSearch: false,
        	    enableClear: false,
        	    autosearch: false,
        	    formtype: 'vertical',
        	    filterModel: [{
        	        label: '<% =Html.Resource("User","username") %>',
        	        name: 'userName',
        	        stype: 'text'
        	    }, {
        	        label: '<% =Html.Resource("User","email") %>',
        	        name: 'email',
        	        stype: 'text'
        	    },
        		    ]
        	})[0];
        jQuery("#basicSearch input").addClass("button normalinput");
        jQuery("#basicSearch td").each(function(index) {
            if (index % 2 == 0)
                jQuery(this).css("width", "18%");
            else
                jQuery(this).css("width", "82%");
        })

        jQuery("#btnSubmit").click(function() {
            sg.triggerSearch();
        });
        jQuery("#btnClear").click(function() {
            sg.clearSearch();
        });
        jQuery("#btnSelect").click(function() {
            sendbackSelected(jQuery("#list"),'Please select at least one user');
        });
        jQuery("#btnCancel").click(function() {
            window.close();
        });
        //intialize search tab
        $("#searchTabs").tabs();



    });
</script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
        <%=Html.Stylesheet("~/Content/jgGrid/ui.jqgrid.css")%>
	    <%=Html.ScriptInclude("~/Scripts/jgGrid/i18n/grid.locale-"+Html.GetjqGridCulture()+".js")%>
        <%=Html.ScriptInclude("~/Scripts/jgGrid/jquery.jqGrid.min.js")%>
</asp:Content>
